<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui"
	template="/templates/masterLayout.xhtml">
	<ui:define name="pageTitle">#{out.importers_title}</ui:define>
	<ui:define name="header"> -> #{out.importers_title}</ui:define>

	<ui:define name="head-extra">
		<!-- custom css -->
	</ui:define>

	<ui:define name="content">
		<p:panel header="Select the products to upload" style="top:0px;"
			id="mainPanel">
			<p:panel style="background:#D3D7FF !important;">
				<h:outputText value="Select a product: " />
				<br />
				<h:form id="productList">
					<p:dataTable id="productTable" var="currentproduct"
						value="#{importerController.productModel}"
						rowKey="#{currentproduct.id}" selectionMode="single"
						selection="#{importerController.selectedProduct}" paginator="true"
						rows="10"
						paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
						rowsPerPageTemplate="5,10,15" lazy="true"
						emptyMessage="#{out.empty_message}">
						<p:ajax event="rowSelect" update="" />
						<p:column headerText="ID" sortBy="#{currentproduct.id}">
							<h:outputText value="#{currentproduct.id}" />
						</p:column>
						<p:column headerText="Category"
							sortBy="#{currentproduct.category.name}"
							filterBy="#{currentproduct.category.name}">
							<h:outputText value="#{currentproduct.category.name}" />
						</p:column>
						<p:column headerText="Name" sortBy="#{currentproduct.name}"
							filterBy="#{currentproduct.name}">
							<h:outputText value="#{currentproduct.name}" />
						</p:column>
						<p:column headerText="Price" sortBy="#{currentproduct.purchasePrice}">
							<h:outputText value="#{currentproduct.purchasePrice}" />
						</p:column>
					</p:dataTable>
				</h:form>
				<h:form id="inputData">
					<div style="width: 100%;">
						<h:panelGrid columns="3" style="width:200px" cellpadding="2">
							<h:outputLabel for="quantity" value="#{out.importer_quantity}:"
								style="font-weight:bold" />
							<p:inputText id="quantity" value="#{importerController.quantity}" />
							<p:commandButton update=":inputData :registryTable"
								action="#{importerController.addRegistryToList()}"
								icon="ui-icon-close" value="#{out.importer_addtolist}" />
						</h:panelGrid>
					</div>
				</h:form>
			</p:panel>
			<br />
			<p:separator />
			<br />
			<p:panel style="background:#84FF9F !important;">
				<h:outputText value="List:" />
				<br />
				<p:dataTable id="registryTable" var="registry"
					value="#{importerController.registryList}">
					<p:column headerText="Product name">
						<h:outputText value="#{registry.product.name}" />
					</p:column>
					<p:column headerText="Quantity">
						<h:outputText value="#{registry.quantity}" />
					</p:column>
					<p:column headerText="Remove?">
						<p:commandButton value="Remove"
							action="#{importerController.removeRegistryFromList(registry)}"
							update=":registryTable" />
					</p:column>
				</p:dataTable>
				<p:separator />
				<h:form>
					<h:outputText value="#{out.importer_selectwh}"
						rendered="#{importerController.selectedWH==null}"
						style="font-weight:bold; color: red; background-color:#F2F2F2; margin: 4px;" />
					<p:dataTable var="wh2" id="whList2"
						value="#{importerFileUpload.allWH}" selectionMode="single"
						selection="#{importerController.selectedWH}" rowKey="#{wh2}"
						emptyMessage="#{out.empty_message}">
						<p:ajax event="rowSelect" update=":submit" />
						<p:column headerText="#{out.importer_whname}">
							<h:outputText value="#{wh2.name}" />
						</p:column>
						<p:column headerText="#{out.importer_whaddress}">
							<h:outputText value="#{wh2.address}" />
						</p:column>
					</p:dataTable>
				</h:form>
			</p:panel>
			<p:separator />
			<p:commandButton id="submit" update=":inputData :registryTable"
				disabled="#{importerController.selectedWH==null}"
				action="#{importerController.saveToDB()}" icon="ui-icon-close"
				value="Upload data" />
		</p:panel>
	</ui:define>
</ui:composition>